<template>
  <div class="crumbs">
    <div class="crumbs_title">{{ title }}</div>
    <div class="crumbs_path">
      <i class="el-icon-location"></i>
      当前位置：
      <el-breadcrumb separator="/">
        <el-breadcrumb-item
          v-for="(item, index) in crumbs"
          :key="index"
          :to="index === crumbs.length - 1 ? null : { path: item.path }"
        >
          <!-- :to="{ path: item.path }" -->
          {{ item.name }}
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  props: {
    title: {
      type: String,
      default: "查询",
      // required:true
    },
    crumbs: {
      type: Array,
      default: () => [
        {
          name: "首页",
          path: "/",
        },
      ],
      // required:true
    },
  },
  methods: {},
};
</script>

<style lang="scss" scoped>
.crumbs {
  display: flex;
  justify-content: space-between;
  .crumbs_title {
    font-size: 18px;
    font-weight: 600;
    border-left: 10px solid #4095ff;
    padding-left: 10px;
  }
  .crumbs_path {
    line-height: 1;
    display: flex;
    font-size: 16px;
  }
}
.el-breadcrumb {
  font-size: 16px;
}
</style>
